@codemirror/lang-wast

What is @codemirror/lang-wast?

@codemirror/lang-wast is a language support package for CodeMirror that provides syntax highlighting and other editor features for WebAssembly Text format (WAT). It is part of the CodeMirror 6 ecosystem, which is a versatile text editor implemented in JavaScript for the browser.

What are @codemirror/lang-wast's main functionalities?

Syntax Highlighting

This code sets up a CodeMirror editor with syntax highlighting for WebAssembly Text format (WAT). The `wast` function from `@codemirror/lang-wast` is used to provide the necessary language support.

import { wast } from '@codemirror/lang-wast';
import { EditorState } from '@codemirror/state';
import { EditorView, basicSetup } from '@codemirror/basic-setup';

const state = EditorState.create({
  doc: `(module
  (func (export "add") (param i32 i32) (result i32)
    local.get 0
    local.get 1
    i32.add))`,
  extensions: [basicSetup, wast()]
});

const view = new EditorView({
  state,
  parent: document.body
});

Code Folding

This code demonstrates how to add code folding to a CodeMirror editor with WebAssembly Text format (WAT) support. The `foldGutter` extension is used alongside `@codemirror/lang-wast`.

import { wast } from '@codemirror/lang-wast';
import { EditorState } from '@codemirror/state';
import { EditorView, basicSetup } from '@codemirror/basic-setup';
import { foldGutter } from '@codemirror/fold';

const state = EditorState.create({
  doc: `(module
  (func (export "add") (param i32 i32) (result i32)
    local.get 0
    local.get 1
    i32.add))`,
  extensions: [basicSetup, wast(), foldGutter()]
});

const view = new EditorView({
  state,
  parent: document.body
});

Linting

This code adds custom linting to a CodeMirror editor with WebAssembly Text format (WAT) support. The `linter` function is used to create a custom linter that can be integrated with `@codemirror/lang-wast`.

import { wast } from '@codemirror/lang-wast';
import { EditorState } from '@codemirror/state';
import { EditorView, basicSetup } from '@codemirror/basic-setup';
import { linter } from '@codemirror/lint';

const myWastLinter = linter(view => {
  let diagnostics = [];
  // Custom linting logic here
  return diagnostics;
});

const state = EditorState.create({
  doc: `(module
  (func (export "add") (param i32 i32) (result i32)
    local.get 0
    local.get 1
    i32.add))`,
  extensions: [basicSetup, wast(), myWastLinter]
});

const view = new EditorView({
  state,
  parent: document.body
});

Other packages similar to @codemirror/lang-wast

@codemirror/lang-javascript

@codemirror/lang-javascript provides language support for JavaScript in CodeMirror. It offers similar features like syntax highlighting, code folding, and linting, but for JavaScript code instead of WebAssembly Text format.

@codemirror/lang-python

@codemirror/lang-python offers language support for Python in CodeMirror. Like @codemirror/lang-wast, it provides syntax highlighting, code folding, and linting, but is tailored for Python code.

@codemirror/lang-html

@codemirror/lang-html provides language support for HTML in CodeMirror. It includes features such as syntax highlighting, code folding, and linting, similar to @codemirror/lang-wast, but for HTML.

README

@codemirror/lang-wast

[ WEBSITE | ISSUES | FORUM | CHANGELOG ]

This package implements WebAssembly Text Format language support for the CodeMirror code editor.

The project page has more information, a number of examples and the documentation.

This code is released under an MIT license.

We aim to be an inclusive, welcoming community. To make that explicit, we have a code of conduct that applies to communication around the project.

API Reference

wast() → LanguageSupport

wastLanguage: LRLanguage

Changelog

6.0.2 (2023-12-28)

Bug fixes

Tag comments and strings as isolating for the purpose of bidirectional text.